<template>
  <ul
    v-if="visible"
    class="we-chat-tray-menu"
    ref="weChatTrayMenuDom"
    :style="{ left: `${position[0]}px`, top: `${position[1]}px` }"
  >
    <li>设置</li>
    <li>意见反馈</li>
    <li>帮助</li>
    <li>关于微信</li>
    <li @click.stop="handleCloseWeChat">退出微信</li>
  </ul>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import { useRunningTasksStore } from '@/stores/taskBar/runningTasks'
import { useClickBlankHidden } from '@/hooks'
import type { PropType } from 'vue'

export default defineComponent({
  name: 'weChatTrayMenu',
  props: {
    modelValue: {
      type: Boolean as PropType<boolean>,
      required: true
    },
    position: {
      type: Array as PropType<number[]>,
      required: true,
      default: () => [0, 0]
    },
    appId: {
      type: String as PropType<string>,
      required: true
    },
    taskId: {
      type: String as PropType<string>,
      required: true
    }
  },
  emits: ['update:modelValue'],
  setup(props, ctx) {
    const runningTasksStore = useRunningTasksStore()
    const weChatTrayMenuDom = ref<HTMLElement>()
    const visible = ref<boolean>(props.modelValue)

    const handleCloseWeChat = () => {
      runningTasksStore.closeTask(props.appId, props.taskId)
      ctx.emit('update:modelValue', false)
    }

    useClickBlankHidden(
      () => weChatTrayMenuDom.value,
      () => {
        visible.value = false
        ctx.emit('update:modelValue', false)
      }
    )

    watch(
      () => props.modelValue,
      (val: boolean) => {
        visible.value = val
      }
    )

    return {
      visible,
      weChatTrayMenuDom,
      handleCloseWeChat
    }
  }
})
</script>

<style scoped lang="scss">
@import '@/assets/scss/common';

.we-chat-tray-menu {
  width: 90px;
  position: fixed;
  z-index: $z-index-task-bar;
  border: 1px solid rgb(133, 133, 133);
  background-color: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  transform: translateY(-100%);

  > li {
    height: 32px;
    line-height: 32px;
    padding-left: 20px;

    &:hover {
      background-color: rgb(226, 226, 226);
    }
  }
}
</style>
